<template>
	<view>
		<view class="appointment-soon" @tap="submit">一键预约</view>
		
		<!-- 购买易货商品输入密码弹窗 -->
		<view class="props-soon" v-if="isPropSoon">
			<view class="buyProp-soon">
				<image src="@/static/recharge/close.png" class="closeImg-soon" @tap="closeProp"></image>
				<view class="title-soon">确认预约</view>
				
				<view class="numTitle-soon">支付方式</view>
				
				<view class="prop-type-soon">
					
					<view class="prop-type-item-soon" v-for="(item,index) in walletTypeSoon" :key="index" @tap="changeWalletType(item)">
						<image :src="walletIdSoon == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'" class="radioImg-soon"></image>
						{{item.title}}
					</view>
					
				</view>
				
			    <view class="numTitle-soon">支付密码</view>
			    <input placeholder="请输入支付密码" class="input-prop-soon" password placeholder-class="placeholder" type="number" v-model="payPasswordSoon"/>
				<view class="sures-soon" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { addressList,appointmentAll } from '@/api/api.js'
	export default {
		name:"appointmentAll",
		data() {
			return {
				addressListSoon:[],
				addressIdSoon:'',
				isPropSoon:false,
				payPasswordSoon:'',
				walletIdSoon:1,
				walletTypeSoon:[
					{id:1,title:'多多券'},
					{id:2,title:'快乐豆'},
				],
			};
		},
		onShow: function() {
		},
		created() {
			// 获取地址列表
			this.getAddressList()
		},
		methods:{
			changeWalletType(item) {
				this.walletIdSoon = item.id
			},
			// 获取地址列表
			getAddressList() {
				let data = {}
				addressList(data).then( res=> {
					this.addressListSoon = res.data
					// 如果没有添加地址,提示去添加
					if ( this.addressListSoon.length == 0 ) {
						this.addresssInfoSoon = ''
					}else if( this.addressListSoon.length == 1 ) {
						// 如果只有一个地址,直接显示为默认
						this.addresssInfoSoon = this.addressListSoon[0]
						this.addressIdSoon = this.addressListSoon[0].id
					}else if( this.addressListSoon.length > 1 ){
						// 如果存在多个地址,先判断是否有默认地址
						let isHaveDefault = this.addressListSoon.some( item => item.isDefault == 1)
						// 如果有,查询默认地址
						if( isHaveDefault ) {
							this.addressListSoon.forEach( item => {
								if( item.isDefault == 1 ) {
									this.addresssInfoSoon = item
									this.addressIdSoon = item.id
								}
							})
						}else {
							// 如果没有,默认第一条地址
							this.addresssInfoSoon = this.addressListSoon[0]
							this.addressIdSoon = this.addressListSoon[0].id
						}
					}
				})
			},
			submit() {
				if( this.addressListSoon.length == 0 ) {
					uni.showToast({
						title:'请先添加默认地址',
						icon:'none'
					})
					return
				}
				this.isPropSoon = true
				this.$forceUpdate()
			},
			sure() {
				uni.showLoading({
					title: ''
				});
			    let data = {
			    	addressId:this.addressIdSoon,
			    	walletType:this.walletIdSoon,
			    	payPassword:this.payPasswordSoon
			    }
			    appointmentAll(data).then( res=> {
					uni.hideLoading()
			    	uni.showToast({
			    		title:'预约成功',
			    		icon:'none'
			    	})
			    	this.closeProp()
			    })	
			},
			closeProp() {
				this.isPropSoon = false
				this.payPasswordSoon = ''
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="less">
	/*每个页面公共css */
	.appointment-soon {
		position: fixed;
		right: 10px;
		top: 600rpx;
		background: rgba(250, 47, 48, 0.7);
		text-align: center;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 100rpx;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		z-index: 99;
	}
	.props-soon {
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(26, 26, 26, 0.45);
		.buyProp-soon {
			padding-bottom: 40rpx;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 560rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.closeImg-soon {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: 37rpx;
				right: 25rpx;
			}
			
			.title-soon {
				margin-top: 38rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				line-height: 42rpx;
			}
			.numTitle-soon {
				margin-top: 46rpx;
				width: 470rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 37rpx;
			}
			.prop-type-soon {
				margin-top: 24rpx;
				width: 470rpx;
				display: flex;
				align-items: center;
				
				.prop-type-item-soon {
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					.radioImg-soon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
				}
				
			}
			.input-prop-soon {
				margin-top: 12rpx;
				height: 88rpx;
				width: 470rpx;
				border-bottom:1rpx solid #F2F2F2 ;
			}
			.placeholder-soon {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}
			.sures-soon {
				margin-top: 60rpx;
				text-align: center;
				line-height: 86rpx;
				width: 470rpx;
				height: 86rpx;
				background: #FE3B33;
				border-radius: 4rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			.codes-soon {
				position: absolute;
				right: 43rpx;
				bottom: 210rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FE3B33;
				line-height: 33rpx;
			}
		}
	}
</style>